<html><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY Overlay</title>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/css/dpl/--base.css,badges.css,forms.css,icons.css,labels.css,tables.css-20130815" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/css/dpl/??base.css,badges.css,forms.css,icons.css,labels.css,tables.css?20130815"
            rel="stylesheet"/>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/fi000001.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/??button/assets/dpl.css,calendar/assets/dpl.css,menu/assets/dpl.css,combobox/assets/dpl.css,menubutton/assets/dpl.css,overlay/assets/dpl.css,split-button/assets/dpl.css,tabs/assets/dpl.css,toolbar/assets/dpl.css,tree/assets/dpl.css?20130815"
            rel="stylesheet"/>

    <script src="../../../../g.tbcdn.cn/kissy/k/1.3.1/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js" data-config="{combine:true}"></script>
<link rel="stylesheet" href="../assets/docs.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/docs.css?20130815">
<link rel="stylesheet" href="../assets/prettify.css-20130815" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.css?20130815">
<script type="text/javascript" src="../assets/prettify.js" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div class="container">


    <h1>模态对话框</h1>

    <div class="row-fluid">
        <div class="span5">
            <h3>模态对话框</h3>
            <p>带遮罩的模态对话框</p>
        </div>
        <div class="span5">
            <h2>demo</h2>

            <div class="ks-button ks-button-primary" id="ok">弹出对话框</div>

        </div>
        <div class="span14">
            <pre class="prettyprint linenums">
KISSY.use("overlay,button", function (S, Overlay, Button) {
    var d = new Overlay.Dialog({
        headerContent:"头部",
        width:500,
        mask:true,
        bodyContent:"<div>内容</div>",
        align:{
            points:['cc', 'cc']
        }
    });

    d.on("afterRenderUI", function () {
        new Button({
            content:"关闭",
            elCls:"ks-button-primary",
            listeners:{
                click:function () {
                    d.hide();
                }
            },
            render:d.get("footer")
        }).render();
        new Button({
            content:"保存",
            render:d.get("footer")
        }).render();
    });

    new Button({
        srcNode:'#ok',
        listeners:{
            click:function () {
                d.show();
            }
        }
    }).render();

});                
            </pre>
        </div>
    </div>

    <script>
        KISSY.use("overlay,button", function (S, Overlay, Button) {
            var d = new Overlay.Dialog({
                headerContent:"头部",
                width:500,
                mask:true,
                bodyContent:"<div>内容</div>",
                align:{
                    points:['cc', 'cc']
                }
            });

            d.on("afterRenderUI", function () {
                new Button({
                    content:"关闭",
                    elCls:"ks-button-primary",
                    listeners:{
                        click:function () {
                            d.hide();
                        }
                    },
                    render:d.get("footer")
                }).render();
                new Button({
                    content:"保存",
                    render:d.get("footer")
                }).render();
            });

            new Button({
                srcNode:'#ok',
                listeners:{
                    click:function () {
                        d.show();
                    }
                }
            }).render();

        });
    </script>

<hr>
    <h1>popup</h1>

    <div class="row-fluid">
        <div class="span5">
            <h3>popup</h3>
            <p>一些小的内容浮出展示</p>
        </div>
        <div class="span5">
            <h2>demo</h2>

            <div class="ks-button ks-button-danger" id="hover">hover for popup</div>

        </div>
        <div class="span14">
            <pre class="prettyprint linenums">
&#60;&#115;&#99;&#114;&#105;&#112;&#116;&#32;&#116;&#121;&#112;&#101;&#61;&#34;&#120;&#45;&#116;&#101;&#109;&#112;&#108;&#97;&#116;&#101;&#34;&#32;&#105;&#100;&#61;&#34;&#104;&#111;&#118;&#101;&#114;&#84;&#112;&#108;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#112;&#111;&#112;&#117;&#112;&#45;&#97;&#114;&#114;&#111;&#119;&#34;&#62;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#112;&#111;&#112;&#117;&#112;&#45;&#105;&#110;&#110;&#101;&#114;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#104;&#51;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#112;&#111;&#112;&#117;&#112;&#45;&#116;&#105;&#116;&#108;&#101;&#34;&#62;&#65;&#32;&#84;&#105;&#116;&#108;&#101;&#60;&#47;&#104;&#51;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#112;&#111;&#112;&#117;&#112;&#45;&#99;&#111;&#110;&#116;&#101;&#110;&#116;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#112;&#62;&#65;&#110;&#100;&#32;&#104;&#101;&#114;&#101;&#39;&#115;&#32;&#115;&#111;&#109;&#101;&#32;&#97;&#109;&#97;&#122;&#105;&#110;&#103;&#32;&#99;&#111;&#110;&#116;&#101;&#110;&#116;&#46;&#32;&#73;&#116;&#39;&#115;&#32;&#118;&#101;&#114;&#121;&#32;&#101;&#110;&#103;&#97;&#103;&#105;&#110;&#103;&#46;&#32;&#114;&#105;&#103;&#104;&#116;&#63;&#60;&#47;&#112;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#60;&#47;&#115;&#99;&#114;&#105;&#112;&#116;&#62;&#10;                
            </pre>
            <pre class="prettyprint linenums">
KISSY.use("overlay,button", function (S, Overlay, Button) {
    var $= S.all;

    var b=new Button({
        srcNode:'#hover'
    }).render();

    var d = new Overlay.Popup({
        trigger:"#hover",
        elCls:"ks-popup-right",
        triggerType:"mouse",
        content:$("#hoverTpl").html(),
        effect:{
            effect:"fade",
            duration:0.3
        },
        align:{
            node:'#hover',
            points:['cr', 'cl']
        }
    });

});                
            </pre>
        </div>
    </div>

<script type="x-template" id="hoverTpl">
    <div class="ks-popup-arrow"></div>
    <div class="ks-popup-inner">
        <h3 class="ks-popup-title">A Title</h3>
        <div class="ks-popup-content">
            <p>And here's some amazing content. It's very engaging. right?</p>
        </div>
    </div>
</script>

    <script>
        KISSY.use("overlay,button", function (S, Overlay, Button) {
            var $= S.all;

            var b=new Button({
                srcNode:'#hover'
            }).render();

            var d = new Overlay.Popup({
                trigger:"#hover",
                elCls:"ks-popup-right",
                triggerType:"mouse",
                content:$("#hoverTpl").html(),
                effect:{
                    effect:"fade",
                    duration:0.3
                },
                align:{
                    node:'#hover',
                    points:['cr', 'cl']
                }
            });

        });
    </script>


<hr>
    <h1>tooltip</h1>

    <div class="row-fluid">
        <div class="span5">
            <h3>tooltip</h3>
            <p>一些更小的内容提示</p>
        </div>
        <div class="span5">
            <h2>demo</h2>

            <a id="tip" href="#">hover for tip</a>

        </div>
        <div class="span14">
            <pre class="prettyprint linenums">
&#60;&#115;&#99;&#114;&#105;&#112;&#116;&#32;&#116;&#121;&#112;&#101;&#61;&#34;&#120;&#45;&#116;&#101;&#109;&#112;&#108;&#97;&#116;&#101;&#34;&#32;&#105;&#100;&#61;&#34;&#116;&#105;&#112;&#84;&#112;&#108;&#34;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#112;&#111;&#112;&#117;&#112;&#45;&#97;&#114;&#114;&#111;&#119;&#34;&#62;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#32;&#60;&#100;&#105;&#118;&#32;&#99;&#108;&#97;&#115;&#115;&#61;&#34;&#107;&#115;&#45;&#116;&#111;&#111;&#108;&#116;&#105;&#112;&#45;&#105;&#110;&#110;&#101;&#114;&#34;&#62;&#102;&#105;&#114;&#115;&#116;&#32;&#116;&#111;&#111;&#108;&#116;&#105;&#112;&#60;&#47;&#100;&#105;&#118;&#62;&#10;&#60;&#47;&#115;&#99;&#114;&#105;&#112;&#116;&#62;
            </pre>
            <pre class="prettyprint linenums">
KISSY.use("overlay,button", function (S, Overlay, Button) {
    var $= S.all;

    var d = new Overlay.Popup({
        trigger:"#tip",
        elCls:"ks-popup-top",
        triggerType:"mouse",
        content:$("#tipTpl").html(),
        effect:{
            effect:"fade",
            duration:0.3
        },
        align:{
            node:'#tip',
            points:['tc', 'bc']
        }
    });

});                
            </pre>

        </div>
    </div>

<script type="x-template" id="tipTpl">
        <div class="ks-popup-arrow"></div>
        <div class="ks-tooltip-inner">first tooltip</div>
</script>

    <script>
        KISSY.use("overlay,button", function (S, Overlay, Button) {
            var $= S.all;

            var d = new Overlay.Popup({
                trigger:"#tip",
                elCls:"ks-popup-top",
                triggerType:"mouse",
                content:$("#tipTpl").html(),
                effect:{
                    effect:"fade",
                    duration:0.3
                },
                align:{
                    node:'#tip',
                    points:['tc', 'bc']
                }
            });

        });
    </script>

</div>


</body>
</html>